<template>
  <div>
    <section class="cars-item">
      <header>
        <h4 class="cars-logo">
          <img src="../../assets/image/cars-logo.png" alt="小鹏P7" />
          <span class="name">小鹏P7</span>
        </h4>
        <p class="cars-attr">让色彩,更出彩</p>
      </header>
      <div class="cars-content">
        <div class="cars-f">
          <h4>粤 H88888</h4>
          <div class="cars-ele active-li-8">
            <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div class="cars-KM"><b>约</b><strong>706</strong>KM</div>
        </div>
        <img src="../../assets/image/carss.png" alt="" />
      </div>
      <footer>
        <div class="cars-stop">
          <a href="javascript:void(0);">xx停车场</a>
          <i class="el-icon-arrow-right"></i>
        </div>
      </footer>
    </section>
    <section class="cars-item cars-detailed" :style="'height:' + height">
      <div class="cars-stop">
        <h4 class="column">xx停车场</h4>
        <i class="el-icon-close"></i>
      </div>

      <header>
        <h4 class="cars-logo">
          <img src="../../assets/image/cars-logo.png" alt="小鹏P7" />
          <span class="name">小鹏P7</span>
        </h4>
        <p class="cars-attr">让色彩,更出彩</p>
      </header>
      <div>
        <div class="cars-content">
          <img src="../../assets/image/carss.png" alt="" />
        </div>
        <div class="clearfix">
          <h4 class="pull-left fz-24">粤 H88888</h4>
          <div class="cars-KM pull-right"><b>约</b><strong>706</strong>KM</div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="ele-box">
        <div class="p-r">
          <span class="el-bg"></span>
          <span class="el-high" style="width: 88%"></span>
        </div>
      </div>
      <div class="cars-word">
        <p>取车预支付12.0元停车费,实际补贴12.0元</p>
      </div>
      <div>
        <ul class="cars-list">
          <li class="current">
            <h4 class="pull-left">日租车</h4>
            <span class="pull-right">￥300/天</span>
          </li>
          <li>
            <h4 class="pull-left">3日租车</h4>
            <span class="pull-right">￥499.00/3天</span>
          </li>
          <li>
            <h4 class="pull-left">5日租车</h4>
            <span class="pull-right">￥799.00/5天</span>
          </li>
          <li>
            <h4 class="pull-left">小时租车</h4>
            <span class="pull-right">￥99.00/1小时</span>
          </li>
        </ul>
      </div>
      <div class="cars-protect">
        <span>参保《全面保障服务》用车更放心</span>
        <span class="pull-right"
          ><i class="el-icon-success"></i> <i class="el-icon-circle-check"></i
        ></span>
      </div>
      <a href="javascript:void(0);" class="select-bar select-car">预约用车</a>
    </section>
    <!-- <span>车辆列表</span> -->
  </div>
</template>
<script>
  export default {
    name: "CarsList",
    props: {
      height: {
        type: String,
        default: "185px",
      },
    },
    data() {
      return {}
    },
    methods: {},
  }
</script>
<style lang="scss">
  @import "./index.scss";
  @import "../../styles/sassConfig.scss";
</style>
